window.addEventListener('load', function() {
    const ul = document.querySelector('.pic-area ul');
    const pic = document.querySelector('.pic-area');
    const lis = this.document.querySelectorAll('.pic-area ul li');
    this.console.log(lis.length)
    const pic_w_len = pic.offsetWidth;
    this.console.log(ul.offsetWidth);
    var num = 0;
    // 克隆节点
    var li = ul.children[0].cloneNode(true);
    ul.appendChild(li);
    var timers = this.setInterval(function() {
        num++;
        if (num >= lis.length) {
            ul.style.left = 0 + 'px';
            num = 0;
        }
        tmer_go(ul, -pic_w_len * num);
    }, 2000);

    function tmer_go(obj, time_out, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //步长公式(目标值-现在位置)/10
            var step = (time_out - obj.offsetLeft) / 10;
            //直接给步长会出现位置偏差 需要进一步判断，
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == time_out) {
                clearInterval(obj.timer);
                //添加回调函数，回调函数写在定时器结束里面
                // if (callback) {
                //     callback();
                // }
                //高级写法
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    };

});